<template>
    <div class="layout-header">
        <header class="header" :class="{ active: menuOpen }">
            <cite>
                <nuxt-link class="header-logo" to="/">
                    <span>PODpartner</span>
                    <img src="@/assets/images/logo.png" alt="" />
                </nuxt-link>

                <div class="header-nav" @click="handleClick($event)">
                    <ul>
                        <li :class="{ active: navPath.indexOf('product') >= 0 }">
                            <HeaderbarProductNavigate>
                                <nuxt-link to="/product">Products</nuxt-link>
                            </HeaderbarProductNavigate>
                        </li>
                        <li :class="{ active: navPath.indexOf('how-work') >= 0 }">
                            <nuxt-link to="/document/how-work">How it works</nuxt-link>
                        </li>
                        <li :class="{ active: navPath.indexOf('logistics') >= 0 }">
                            <nuxt-link to="/document/logistics">Shipping</nuxt-link>
                        </li>
                        <li :class="{ active: navPath.indexOf('about-us') >= 0 }">
                            <nuxt-link to="/document/about-us">About us</nuxt-link>
                        </li>
                        <li :class="{ active: navPath.indexOf('help-center') >= 0 }">
                            <nuxt-link to="/document/help-center">Help center</nuxt-link>
                        </li>
                        <li :class="{ active: navPath == '/document/embroidery' }">
                            <nuxt-link to="/document/embroidery">Embroidery</nuxt-link>
                            <em v-show="emb_hot"></em>
                        </li>
                    </ul>
                </div>

                <div class="header-menu" @click="openMenu(!menuOpen)"></div>

                <!-- 多币种 -->
                <HeaderbarCurrency :class="{ logged: isLogin }" />

                <!-- 消息框 -->
                <HeaderbarNotice v-if="isLogin" />

                <!-- 用户信息 -->
                <HeaderbarUser v-if="isLogin" />

                <!-- 登录按钮 -->
                <div class="header-login" v-if="!isLogin">
                    <button @click="doLogin()">Sign in</button>
                    <button type="primary" @click="doSignup()">Sign up</button>
                </div>
            </cite>
        </header>
    </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
    name: "TopBar",
    data () {
        return {
            // storageToken: "",
            menuOpen: false,
            loginOut: true,
            startY: 0,
            ready: false,
            emb_hot: true,
        };
    },
    computed: {
        ...mapGetters({
            isLogin: "getIsLogin",
        }),
        ...mapGetters("user", {
            userInfo: "getUserInfo",
        }),
        //路由是否选中
        navPath () {
            let path = this.$route.path;
            return path;
        },
        routeName () {
            return this.$route.name || '';
        },
        userLoading () {
            // 如果是已登录，但是没有用户数据时，表示loading
            // if (!this.ready) {
            //     return true;
            // } else if (this.isLogin && (!this.userInfo || !this.userInfo.contact_email)) {
            //     return true;
            // } else {
            //     return false;
            // }

            return false;
        }
    },
    watch: {
        routeName: {
            immediate: true,
            handler () {
                if (this.routeName == 'document-embroidery') {
                    this.$localstoreConfig('emb-host', true)
                    this.emb_hot = false;
                }
            }
        }
    },
    methods: {


        doLogin () {
            // localStorage.removeItem("headerColor");
            this.$emit("global:userLogin", () => {
                this.$router.push("/user");
            });
        },
        doSignup () {
            this.$emit("global:userSignup", () => {
                this.$router.push("/user");
            });
        },

        handleClick (event) {
            let target = event.target;

            if (target.tagName.toLowerCase() == 'ul') {
                this.openMenu(false);
            } else if (target.closest('a')) {
                this.openMenu(false);
            }
        },
        openMenu (status) {
            this.menuOpen = !!status;
            if (this.menuOpen) {
                let scrollTop = document.scrollingElement.scrollTop
                document.body.classList.add('wap-dialog')
                document.body.style.top = -scrollTop + 'px'
            } else {
                let scrollTop = Math.abs(parseInt(document.body.style.top) || 0)
                document.body.classList.remove('wap-dialog')
                document.body.style.top = null;
                document.scrollingElement.scrollTop = scrollTop;

            }
        },
        getEmbHot () {
            this.emb_hot = !this.$localstoreConfig('emb-host')
        }
    },

    created () {
        if (process.client) {
            this.ready = true;
        }
    },
    mounted () {
        this.getEmbHot()
        if (window.top == window.self) {
            this.loginOut = true;
        } else {
            this.loginOut = false;
        }
    },
};
</script>

<style lang="scss" scoped>
$activeColor: #ea4c89;

.layout-header {
    height: 78px;
}

.header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    padding: 0 100px 0 80px;
    height: 78px;
    background: #ffffff;
    box-sizing: border-box;
    border-bottom: #f2f2f2 solid 1px;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;

    &>cite {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        margin: 0 auto;
        max-width: 1920px;
    }
}

.header-logo {
    display: flex;
    align-items: center;
    font-size: 0;

    img {
        width: 152px;
        height: 26px;
    }
}

.header-nav {
    flex: 1;

    ul {
        display: flex;
        align-items: center;
        padding: 0 35px;
        box-sizing: border-box;
    }

    li {
        color: #000;
        user-select: none;
        cursor: pointer;
        padding: 0 20px;
        display: block;
        position: relative;

        &>em {
            width: 6px;
            height: 6px;
            background: #F03C2F;
            position: absolute;
            right: 10px;
            margin-left: 4px;
            top: 50%;
            margin-top: -8px;
            border-radius: 6px;
        }

        &>a {
            display: block;
            white-space: nowrap;
            font-size: 16px;
            line-height: 78px;
            color: inherit;

            &:hover {
                color: $activeColor;
            }
        }

        &.active {
            color: $activeColor;
        }

        &::v-deep .product-navigate>a {
            &:hover {
                color: $activeColor;
            }

            font-size: 16px;
            line-height: 78px;
            color: inherit;
        }
    }
}

.header-menu {
    display: none;
}

.header-loading {
    width: 40px;
    height: 8px;

    img {
        width: 100%;
        height: 100%;
    }
}

.header-login {
    display: flex;
    align-items: center;
    margin-left: 12px;

    button {
        font-size: 14px;
        width: 92px;
        height: 32px;
        white-space: nowrap;

        &+button {
            margin-left: 10px;
        }
    }
}

.header-message {
    position: relative;
    margin-left: 12px;
    width: 28px;
    height: 28px;
}

.hover-main {
    display: none !important;
    transition: all 0.3s;
}

@media screen and (max-width: 1580px) {
    .header-user cite {
        left: auto;
        right: 0;
        transform: translate(0, 4px);
    }
}

@media (max-width: 1040px) {
    .header-nav {
        &>ul {
            li {
                padding: 0 8px;
            }
        }
    }
}

@media (max-width: 960px) {
    .layout-header {
        height: 52px;
    }

    .header {
        height: 52px;
        padding: 0;

        &>cite {
            height: 52px;
            justify-content: center;
        }
    }

    .header-logo {
        height: 20px;

        img {
            width: 112px;
            height: 19px;
        }
    }

    .header-nav {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 0;
        overflow: hidden;
        transition: all 0.3s;
        background: rgba(0, 0, 0, 0.18);
        z-index: 1;

        &::before {
            content: 'Menu';
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            height: 52px;
            line-height: 52px;
            width: 100%;
            text-align: center;
            background-color: #fff;
            font-size: 16px;
            font-weight: bold;
            color: #000000;
        }

        ul {
            position: absolute;
            left: 0;
            top: 52px;
            width: 100%;
            bottom: 0;
            padding: 0;
            flex-direction: column;
            pointer-events: all;
            align-items: stretch;
            border-top: 1px solid #f0f0f0;
            overflow: auto;
            box-sizing: border-box;
            padding-bottom: 80px;

            li {
                padding: 0 20px;
                background-color: #fff;

                &>a {
                    display: block;
                    line-height: 52px;
                    border-top: 1px solid #f0f0f0;
                }

                &::v-deep .product-navigate>a {
                    font-size: 16px;
                    line-height: 52px;
                    color: inherit;
                    display: block;
                }

                &.active>a {
                    font-weight: bold;
                }

                &.active::v-deep .product-navigate>a {
                    font-weight: bold;
                }
            }
        }
    }

    .header-menu {
        position: absolute;
        left: 4px;
        top: 4px;
        width: 44px;
        height: 44px;
        display: block;
        z-index: 2;

        &::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 18px;
            height: 1px;
            margin-left: -9px;
            margin-top: -0.5px;
            background-color: #000;
            transform: translateY(-3px);
            transition: all 0.3s;
        }

        &::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 18px;
            height: 1px;
            margin-left: -9px;
            margin-top: -0.5px;
            background-color: #000;
            transform: translateY(3px);
            transition: all 0.3s;
        }
    }

    .header-loading {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 14px;
        width: 20px;
        height: 4px;
    }

    .header-currency {
        position: absolute;
        top: 50%;
        right: 60px;
        width: 60px;
        height: 26px;
        margin-top: -13px;
        margin-right: 0;

        &.logged {
            right: 102px;
        }
    }

    .header-message {
        position: absolute;
        top: 50%;
        right: 60px;
        width: 24px;
        height: 24px;
        margin-top: -12px;
        margin-right: 0;
    }

    .header-login {
        position: absolute;
        right: 8px;

        svg {
            display: block;
            width: 26px;
            height: 26px;
        }

        button:nth-child(1) {
            display: none;
        }

        button:nth-child(2) {
            width: 44px;
            height: 44px;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            border: none;
            background: url(@/assets/images/user-unlogin.png) no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
            text-indent: -999em;

            span {
                display: none;
            }
        }
    }

    .header.active {
        .header-menu {
            &::before {
                transform: rotate(45deg);
            }

            &::after {
                transform: rotate(-45deg);
            }
        }

        .header-nav {
            height: 100vh;
        }
    }
}

@media (max-width: 640px) {
    .header-currency {
        display: none;
    }
}
</style>
